<!--
  Copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://www.apache.org/licenses/LICENSE-2.0.html
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: StreetView Overlays</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
<script type="text/javascript">

  var map;
  var panorama;
  var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
  var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
  var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
  var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);

  function addInfoWindowListener(marker, text) {
    google.maps.event.addListener(marker,'click',function() {
      var iw = new google.maps.InfoWindow({
        content: text
      });
      if(panorama.getVisible()) {
        iw.open(panorama, marker);
      } else {
        iw.open(map,marker);
      }      
    })
  }

  function initialize() {

    // Set up the map
    var mapOptions = {
      center: astorPlace,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    // Setup the markers on the map
    var cafeMarkerImage =
        new google.maps.MarkerImage(
            'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00');
    var cafeMarker = new google.maps.Marker({
        position: cafe,
        map: map,
        icon: cafeMarkerImage,
        title: 'Cafe'
    });
    addInfoWindowListener(cafeMarker, 'Cafe');

    var bankMarkerImage =
        new google.maps.MarkerImage(
            'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00');
    var bankMarker = new google.maps.Marker({
        position: bank,
        map: map,
        icon: bankMarkerImage,
        title: 'Bank'
    });
    addInfoWindowListener(bankMarker, 'Bank');

    var busMarkerImage =
        new google.maps.MarkerImage(
            'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00');
    var busMarker = new google.maps.Marker({
        position: busStop,
        map: map,
        icon: busMarkerImage,
        title: 'Bus Stop'
    });
    addInfoWindowListener(busMarker, 'Bus Stop');

    // We get the map's default panorama and set up some defaults.
    // Note that we don't yet set it visible.
    panorama = map.getStreetView();
    panorama.setPosition(astorPlace);
    panorama.setPov({
      heading: 265,
      zoom:1,
      pitch:0}
    );
  }

  function toggleStreetView() {
    var toggle = panorama.getVisible();
    if (toggle == false) {
      panorama.setVisible(true);
    } else {
      panorama.setVisible(false);
    }
  }
</script>
</head>
<body onload="initialize()">
  <div id="toggle">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
  </div>
  <div id="map_canvas" style="position:relative;height: 420px"></div>
</body>
</html> 